<template>
  <div class="container">
    <div class="title">
    <div class="calendar-warp" v-if="schedule.showStartDate">
      <i class="fa fa-calendar"></i>
      <span v-text="startTime"></span> {{week[weekDay]}}
    </div>
    <div v-if="schedule.created">
      <a class="schedule-del-wrapper" @click="confirmDel(schedule.id)"><i class="fa fa-trash"></i></a>
      <router-link :to="{name: 'scheduleEdit', params:{scheduleId: schedule.id}}" class="schedule-edit-wrapper"> <i class="fa fa-edit"></i></router-link>
    </div>
  </div>
    <div class="time-line">
      <div class="timeline-item-tail"></div>
      <div class="timeline-item-head" :style="{backgroundColor: schedule.colorValue}"></div>
      <div :class="['timeline-item-content', schedule.owner ? 'green' : 'item']">
        <i class="fa fa-caret-left fa-3x caret-left" :class="[schedule.owner ? 'greenColor' : 'item']"></i>
        <div class="schedule-title">
          <span v-text="time" class="schedule-time"></span>
          <span v-text="schedule.name" class="schedule-name"></span>
        </div>
        <div class="schedule-content">
          <h2 v-if="schedule.visitors.trim().length > 0">
            <label><i class="fa fa-user-secret"></i>来访对象</label>
            <span v-text="schedule.visitors">xxxx</span>
          </h2>
          <h2 v-if="schedule.leaders.trim().length > 0">
            <label><i class="fa fa-user-o"></i>出席领导</label>
            <span v-text="schedule.leaders">xxxx</span>
          </h2>
          <h2 v-if="schedule.participants.trim().length > 0">
            <label><i class="fa fa-users"></i>参与人员</label>
            <span v-text="schedule.participants">xxxx</span>
          </h2>
          <h2 v-if="schedule.location.trim().length > 0">
            <label><i class="fa fa-map-marker"></i>地点</label>
            <span v-text="schedule.location">xxxx</span>
          </h2>
          <h2>
            <label><i class="fa fa-bookmark"></i>备注 </label>
            <span v-text="schedule.content"></span>
          </h2>
          <h3>
            <a v-if="schedule.attrachList.length" v-for="disk in schedule.attrachList" :key="disk.id" @click="viewAttach(disk.id)">
              <i :class="['fa', disk.iconClass]"/>
              <span v-text="disk.name"></span>
            </a>
          </h3>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import fetch from '../../utils/fetch'
  import { MessageBox } from 'mint-ui';
  import { Toast } from 'mint-ui';
  export default{
    data(){
      return{
        startTime: moment(this.schedule.startTime).format('MM月DD日'),
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        weekDay: moment(this.schedule.startTime).weekday(),
        time: moment(this.schedule.startTime).format('HH:mm')
      }
    },
    props: ['schedule'],
    methods:{
      viewAttach(diskId) {
        window.open('/api/disk/'+diskId+'/pdf')
      },
      showScheduleDate() {

      },
      confirmDel(scheduleId) {
        MessageBox.confirm('确定要删除当前日程吗?').then(action => {
          fetch.delete('/api/pim/schedule/' + scheduleId).then(response =>{
            if(response.data.success) {
              Toast({
                message: '删除成功',
                iconClass: 'mintui mintui-success'
              });
              this.$emit('refresh');
            }
          })
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    padding: 0 0 0 15px;
    position: relative;
    .title{
      min-height: 30px;
      @include fz(6px);
      i{
        color: #0074D9;
      }
      .calendar-warp{
        float: left;
        display: block;
      }
      .schedule-edit-wrapper{
        padding: 5px;
        color: #0074D9;
        float: right;
        margin-right: 10px;
      }
      .schedule-del-wrapper{
        padding: 5px;
        float: right;
        margin-right: 25px;
        i{
          color: #ce3c39;
        }
      }
    }
    .time-line{
      position: relative;
      padding: 20px;
      .timeline-item-tail{
        height: 100%;
        border-left: 1px solid #cecece;
        position: absolute;
        left: 4px;
        top: 0px;
      }
      .timeline-item-head{
        color: #2d8cf0;
        width: 10px;
        height: 10px;
        background-color: #1aad19;
        border-radius: 50%;
        border: 1px solid #e9eaec;
        position: absolute;
        left: -3px;
        top:36px;
      }
      .timeline-item-content {
        font-size: 12px;
        position: relative;
        background-color: #fff;
        padding: 10px;
        min-height: 100px;
        .caret-left{
          position: absolute;
          left: -10px;
          color: #fff;
          top: 5px;
          &.greenColor{
            color: #dff0d8;
          }
        }
        .schedule-title{
          .schedule-time{
            @include fz(5.5px);
          }
          .schedule-name{
            display: inline-block;
            margin: 0 0 0 15px;
            @include fz(5.5px);
            font-weight: 400;
          }
        }
        .schedule-content{
          padding: 0 0 0 15px;
          h2{
            padding: 10px 0;
            label {
              @include fz(4.5px);
              color:#80848f;
              i{
                position: relative;
                margin-right: 5px;
              }
            }
            span{
              @include fz(4.5px);
              font-weight: 400;
            }
          }
          h3{
            padding: 5px 0;
            a{
              margin-left: 10px;
              i{
                color: #0074D9;
              }
              span {
                @include fz(5px);
              }
            }
          }
        }
        &.green{
        background: #dff0d8;
        }
      }
    }
  }








</style>
